<template>
    <div class="container">
        <el-card>
            <span class="_before">购箱量-日期分析</span>
            <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="true" :showBoxTool="true" :showSortByField="false" @updateValue='getXmSaleDate'></ControlPanel>
            <LineChart :config="lineConfig" @dataPointClick="dataPointClick"></LineChart>
        </el-card>

        <el-dialog v-model="bar1Dialog" destroy-on-close title="购箱量-提箱城市分析" width="1000">
            <BarChart1 :config="barConfig1"></BarChart1>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup >
import { ref,reactive,onMounted} from 'vue'
import ControlPanel from '@/views/businessAnalysis/controlPanel'
import LineChart from '@/views/businessAnalysis/chart/line'
import { xmSaleDate } from '@/api/businessAnalysis'

import Cookies from 'js-cookie'
let companyId:any
let companyName:any
try { 
    companyId =   JSON.parse(Cookies.get('User-Info')).companyId
    companyName =   JSON.parse(Cookies.get('User-Info')).companyName
} catch (error) {
    companyId =   Cookies.get('User-Info').companyId
    companyName =  Cookies.get('User-Info').companyName
}

// 获取当前日期
const currentDate = new Date();
const currentDateStr = getFormattedDate(currentDate);

// 获取7天后的日期
const futureDate = new Date();
futureDate.setDate(currentDate.getDate() + 6);
const futureDateStr = getFormattedDate(futureDate);
const timeInterval = ref([currentDateStr,futureDateStr]) //查询时间区间
let cahrtData = {
    dataType:'3',
    timePeriod:[currentDateStr,futureDateStr],
    boxType:'1',
    boxCondition:'1',
    sortByField:'5',
    companyId:'',
    dataTime:currentDateStr,
    companyName:companyName
}

const lineConfig = reactive({
    xAxisData: [],
    yAxisData: [],
    legendData: ['已提箱量']
})

const getXmSaleDate = (_row: any) => { 
    let reqParams = {
        dataType:_row.dataType,
        beginDataTime: _row.timePeriod[0],
        endDataTime: _row.timePeriod[1],
        boxType:_row.boxType == '1'?'':_row.boxType,
        boxCondition:_row.boxCondition == '1'?'':_row.boxCondition
    }
    xmSaleDate(reqParams).then(res => { 
        if(res.code == "00000" && res.data.length > 0){
            lineConfig.xAxisData.length = 0
            lineConfig.yAxisData.length = 0
            res.data.forEach(item => { 
                lineConfig.xAxisData.push(item.dataTime)
                lineConfig.yAxisData.push(item.boxQuantity)
            })
        }
    })
}
const dataPointClick = (row:any) => { 
    console.log("456789",row)
}
onMounted(() => { 
    getXmSaleDate(cahrtData)
})
// 获取时间区间
function getFormattedDate(date: Date): string {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}${month}${day}`;
}
</script>
<style lang="scss" scoped>
.container{
    padding: 0 20px;
}
</style>